<template>
  <div class="box">
    <div class="display_flex">
      <div>
            施工片块：
            <el-select v-model="value" placeholder="全部">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div>
            开始时间：
            <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
          </div>
          <div>
            截止时间：
            <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
          </div>
          <div>
            <el-button type="primary">查询</el-button>
          </div>
    </div>
    <div class="zonghe_table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" show-overflow-tooltip label="序号"></el-table-column>
            <el-table-column prop="landName" label="巡查片块"></el-table-column>
            <el-table-column prop="starTime" label="巡查时间"></el-table-column>
            <el-table-column prop="position" label="巡查位置"></el-table-column>
            <el-table-column prop="log" label="巡查日志"></el-table-column>
            <el-table-column label="操作" fixed="right">
              <!--   -->
              <template >
                <el-button size="mini" type="primary" >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pages">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          ></el-pagination>
        </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      options: [
        {
          value: "0",
          label: "全部"
        },
        {
          value: "1",
          label: "莲花村片区片块7-1"
        },
        {
          value: "2",
          label: "莲花村片区片块7-2"
        },
        {
          value: "3",
          label: "莲花村片区片块7-3"
        }
      ],
      value: "",
      value1: "",
      tableData: [
        {
          landName: "莲花村片区片块7-1",
          starTime: "2018年3月2日",
          position: "路孔镇尚书村一组",
          status: "施工前",
          log: "施工准备、施工测量放样"
        },
        {
          landName: "莲花村片区片块7-2",
          starTime: "2018年3月2日",
          position: "路孔镇尚书村一组",
          status: "施工前",
          log: "施工准备、施工测量放样"
        },
        {
          landName: "莲花村片区片块7-3",
          starTime: "2018年3月2日",
          position: "路孔镇尚书村一组",
          status: "施工前",
          log: "施工准备、施工测量放样"
        }
      ],
      currentPage4: 4,
    }
  },
  methods:{
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.box {
  padding: 30px;
}
.display_flex{
  display: flex;
  align-items: center;

}
.display_flex div{
  margin-right: 20px;
  font-size: 14px;
  color: #333;
}
.zonghe_table {
  margin: 20px 0px;
}
.pages {
  text-align: center;
}
</style>